<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <title>title</title>
    <script type="text/javascript" src="../../js/s94.js#debug"></script>
    <script type="text/javascript" src="../../js/s94.app.js"></script>
    <!--公共部分-->
    <script type="text/javascript" src="../../js/common.js"></script>
    <link href="../../css/common.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
	.body{font-size: 0.28rem;padding-bottom: 5rem;}
	.body .button{margin: 0.1rem;}
	.title{width: 100%;margin: 0.6rem 0 0.2rem 0;text-align: center;font-size: 0.36rem;font-weight: bold;}
	.row{display: block;width: 100%;margin: 0.02rem 0;background: #fff;}
	.row:nth-child(even){background-color: #eee;}
	label>span{width: 2rem;display: inline-block;}
	label>input[type="number"]{width: 1rem;}
	label>input[type="text"]{width: 3rem;}
	.tips{color: #f00;font-size: 0.2rem;}
</style>
<body>
	<header class="public">
		<a app href="back" target="_blank"><i ico class="ico-fx-l"></i></a>
		<div class="set-xy full">recordScreen模块测试</div>
	</header>
	<div class="body">
		<form action="">
			
			<label class="row"><span>保存路径：</span><input type="text" name="path" value="/recordScreen"></label>
			<label class="row"><span>视频分辨率：</span><input type="number" name="width" value="1080">*<input type="number" name="height" value="1920"></label>
			<label class="row"><span>dpi：</span><input type="number" name="dpi" value="1"></label>
			<label class="row"><span>比特率：</span><input type="number" name="bitrate" value="1000">Kb</label>
			<label class="row"><span>FPS：</span><input type="number" name="fps" value="60"></label>

		</form>
		<br>
		<div class="button" act="test">测试</div>

		<br>
        <div class="button" act="init">初始化</div>
		<p class="tips">初始化-检查权限>创建一个录屏请求</p>
		<div class="button" act="release">释放</div>
		<p class="tips">释放录屏进程，下次录屏，需要再次调用“创建”然后询问用户操作</p>
        <div class="button" act="start">开始录屏</div>
		<p class="tips">开始录屏，需要在“创建”后调用</p>
        <div class="button" act="stop">结束录制</div>
		<p class="tips">停止录屏，需要在“创建”后调用</p>
        <div class="button" act="pause">暂停</div>
		<p class="tips">暂停录屏，需要在“创建”后调用，要求Android7.0版本以上</p>
		<div class="button" act="resume">继续</div>
		<p class="tips">继续录屏，需要在“创建”后调用，要求Android7.0版本以上</p>
		<div class="button" act="imgCapture">截图</div>
		<p class="tips">需要在“创建”后调用</p>
		
		<div class="time" style="background: rgb(34, 235, 51);">点击开始计时</div>
		<div class="filepath" style="background: rgb(18, 118, 233);">录屏保存地址：<span></span></div>
		<div class="imgCapture" style="background: rgb(18, 118, 233);">截屏图片：<span></span></div>
	</div>
</body>
<script type="text/javascript">
//每个方法传递的参数
var params = {
	init: {},
    start : function(){
		var res={};
		$('form').serializeArray().forEach(function(row){
			res[row.name] = row.value;
		})
		res.bitrate = 1024*res.bitrate;
		return res;
	},
	imgCapture : function(){
		var res={};
		$('form').serializeArray().forEach(function(row){
			res[row.name] = row.value;
		})
		return res;
	},
}
//计时器对象
function Stopwatch(){
	this.logs = [];
	this.duration = 0;
	this.startMs = 0;
}
Stopwatch.prototype.ms = function(){ return new Date().getTime(); }
Stopwatch.prototype.get = function(){
	var now = this.ms();
	return this.startMs ? (now - this.startMs + this.duration) : this.duration;
}
Stopwatch.prototype.start = function(){
	if(this.startMs) return this.get();
	this.startMs = this.ms();
	return this.duration;
}
Stopwatch.prototype.log = function(){
	if(!this.startMs) return this.duration;
	var now = this.ms();
	this.duration += now - this.startMs;
	this.log.push(this.duration);
	this.startMs = now;
	return this.duration;
}
Stopwatch.prototype.pause = function(){
	var now = this.ms();
	this.duration += now - this.startMs;
	this.startMs = 0;
	return this.duration;
}
Stopwatch.prototype.stop = function(){
	this.logs = [];
	this.duration = 0;
	this.startMs = 0;
	return 0;
}
var timeDom = document.querySelector('.time');
var stopwatch = new Stopwatch();
function add0(n, len){
	len = len || 2;
	n = n.toString();
	while (len > n.length) {
		n = '0'+n;
	}
	return n;
}
function displayTime(ms){
	ms = ms || stopwatch.get();
	timeDom.innerText = Math.floor(ms/1000)+':'+ add0(Math.floor((ms%1000)/10))
	if(stopwatch.startMs) setTimeout(displayTime, 1000/25);
}
function displayNitce(ms){
	ms = ms || stopwatch.get();
	displayNitce.md2.update({
		id: displayNitce.id,
		content: Math.floor(ms/1000)+':'+ add0(Math.floor((ms%1000)/10))
	})
	if(stopwatch.startMs) setTimeout(displayNitce, 500);
}
timeDom.onclick = function(){
	if(stopwatch.startMs) {
		displayTime(stopwatch.pause());
	}else{
		displayTime(stopwatch.start());
	}
}



$.app(function(){ //APP加载完成后执行回调函数，等效于apicloud的apiready方法
	var md = $.app("recordScreen");//等效于api.require("recordScreen");
	var md2 = $.app("createNotification");
	//所有按钮统一绑定事件
	$('.button[act]').on("click",function(){
		var act = $(this).attr("act"); //获取需要执行的方法名称
		var param = params[act]; //获取执行的方法需要传递的参数
		switch (typeof(param)) {
			case 'underfind': param = {};break;
			case 'function': param = param();break;
		}
		md[act](param, function(res){
			tips(res.msg);
			$.log(res, act);
			if(!res.status) return;
			switch (act) {
				case 'start':{
					document.querySelector('.filepath>span').innerText = res.path;
					displayNitce.md2 = md2;
					md2.create({
						title: "点击停止录屏",
						content: "00:00",
						ongoing: true
					},function(res2){
						if(res2.id){
							displayNitce.id = res2.id;
							displayNitce();
						}
						if(res2.msg=="event" && res2.eventName=="click"){
							md.stop();
							displayTime(stopwatch.stop());
						}
					})
					displayTime(stopwatch.start());
				}break;
				case 'stop':{
					displayTime(stopwatch.stop());
				}break;
				case 'pause':{
					displayTime(stopwatch.pause());
				}break;
				case 'resume':{
					displayTime(stopwatch.start());
				}break;
				case 'imgCapture':{
					document.querySelector('.imgCapture>span').innerText = res.path;
				}break;
			}
		})
	})
})
</script>
</html>
